<template>
  <div class="app-container">
    <table-list
      ref="tableList"
      :columns="columns"
      :default-data="defaultData"
      :do-add="doAdd"
      :do-edit="doEdit"
      :do-multi-delete="doMultiDelete"
      :form-items="formItems"
      :form-rules="formRules"
      :get-list="getList"
      :search-obj="searchObj"
    />
  </div>
</template>

<script>
  import TableList from '@/components/TableList'
  import { getList, doAdd, doEdit, doMultiDelete } from '@/api/user'
  import { mapGetters } from 'vuex'

  export default {
    components: { TableList },
    data() {
      const imgUrlCellRender = {
        name: 'VxeImage',
        props: {
          width: 36,
          height: 36,
        },
      }
      return {
        getList,
        doAdd,
        doEdit,
        doMultiDelete,
        defaultData: {
          id: '',
          name: '',
          avatar: '',
          phone: '',
          email: '',
          descri: '',
        },
        columns: [
          { type: 'checkbox', width: 70 },
          { type: 'seq', width: 80 },
          { field: 'name', title: '名称' },
          {
            field: 'avatar',
            title: '图片',
            cellRender: imgUrlCellRender,
          },
          { field: 'phone', title: '手机号' },
          { field: 'created_at', title: '注册时间' },
          {
            field: 'action',
            title: '操作',
            slots: { default: 'action' },
            width: 200,
          },
        ],
        formItems: [
          {
            field: 'name',
            title: '名称',
            span: 12,
            itemRender: {
              name: 'VxeInput',
              props: { placeholder: '名称', clearable: true },
            },
          },
          {
            field: 'avatar',
            title: '图片',
            span: 12,
            itemRender: {
              name: 'VxeUpload',
              props: {
                mode: 'image',
                multiple: false,
                showButtonText: false,
                dragSort: true,
                moreConfig: {
                  maxCount: 1,
                },
                imageConfig: {
                  width: 40,
                  height: 40,
                },
                uploadMethod: this.uploadMethod,
              },
            },
          },
          {
            field: 'phone',
            title: '手机号',
            span: 12,
            itemRender: {
              name: 'VxeInput',
              props: { placeholder: '手机号', clearable: true },
            },
          },
          {
            field: 'email',
            title: '邮箱',
            span: 12,
            itemRender: {
              name: 'VxeInput',
              props: { placeholder: '邮箱', clearable: true },
            },
          },
          {
            field: 'descri',
            title: '备注',
            span: 24,
            itemRender: {
              name: 'VxeTextarea',
              props: {
                placeholder: '备注',
                autosize: { minRows: 2, maxRows: 4 },
              },
            },
          },
        ],
        formRules: {
          name: [{ required: true, message: '请输入名称' }],
          phone: [{ required: true, message: '请输入手机号' }],
        },
        searchObj: {
          collapseNode: false,
          items: [
            {
              field: 'name',
              title: '名称',
              span: 4,
              itemRender: {
                name: 'VxeInput',
                defaultValue: '',
                props: { placeholder: '名称', clearable: true },
              },
            },
            {
              field: 'phone',
              title: '手机号',
              span: 4,
              itemRender: {
                name: 'VxeInput',
                defaultValue: '',
                props: { placeholder: '手机号', clearable: true },
              },
            },
          ],
        },
      }
    },
    computed: {
      ...mapGetters(['token']),
    },
    methods: {
      uploadMethod({ file }) {
        return this.$refs.tableList.uploadMethod({ file }, 'avatar')
      },
    },
  }
</script>

<style lang="scss" scoped></style>
